<script setup lang='ts'>
import { useRoute } from 'vue-router'
import { getHWStudentAll, getHWClassAll, setStudentHwRemark } from "@/api/hwApi"
import { getStudentAll } from '@/api/studentApi'
import { computed, ref } from 'vue';

defineOptions({
  name: 'VHwDetail',
})

const route = useRoute()
const hwId = route.params.hwId
const classId = route.params.classId as string
// const hwName = route.params.hwName

const hwDetailList = ref([])
// 获取所有学生本次作业的提交情况
async function fetchHWDetail(classId: string, hwId: string) {
  const result = await getHWStudentAll(classId, hwId)
  hwDetailList.value = result.data as []
}
fetchHWDetail(classId as string, hwId as string)

const classHWList = ref([])
async function fetchClassHWList() {
  const result = await getHWClassAll(+classId)
  classHWList.value = result.data
}
fetchClassHWList()


const studentList = ref([])
async function fetchStudentList() {
  const result = await getStudentAll(+classId)
  studentList.value = result.data.list;
}

fetchStudentList()

const dataList = computed(() => {
  let newData = studentList.value.map((stu: any) => {
    const hwDetail = hwDetailList.value.find((hw: any) => hw.stuId === stu.id)
    console.log(hwDetail);
    return {
      ...stu,
      stuName: stu.nickname,
      ...hwDetail
    }
  })

  console.log(newData);


  newData = newData.map((item: any) => {
    const hw = classHWList.value.find((hw: any) => hw.id === item.homeWorkId)
    return {
      ...item,
      ...hw,
      isEditScore: false
    }
  })

  return newData
})

const handleEditRemark = async (row: any) => {
  row.isEditScore = false;
  const result = await setStudentHwRemark({
    class_id: +classId,
    stu_id: row.stuId,
    stu_home_work_id: row.homeWorkId,
    msg: row.remark,
    remark_time: new Date().getTime() + ""
  })
  console.log(result);
}

</script>

<template>
  <div class='container'>
    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="序号" type="index" width="180" />
      <el-table-column prop="nickname" label="作业名称"></el-table-column>
      <el-table-column prop="stuName" label="姓名"></el-table-column>
      <el-table-column prop="score" label="状态">
        <template #default="{ row }">
          <el-tag v-if="row.state === 0" type="danger">未提交</el-tag>
          <el-tag v-else-if="row.state === 1" type="info">已提交</el-tag>
          <el-tag v-else-if="row.state === 2" type="success">已批改</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="输入评论的内容">
        <template #default="{ row }">
          <el-input v-if="row.isEditScore" placeholder="分数" v-model="row.remark" size="mini"
            style="width: 100px"></el-input>
          <span v-else>{{ row.score }}</span>
          <el-button v-if="row.isEditScore" type="primary" size="mini" @click="handleEditRemark(row)">确定</el-button>
        </template>

      </el-table-column>
      <el-table-column prop="comment" label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="mini" @click="row.isEditScore = true">评论</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang='scss'></style>